<template>
	<view class="app">
		<view class="Setting">
			<AppNavbar :bgColor="'#ededed'" title="Login Device management" titlecolor="#000" leftIconColor="#000"
				fontWeight="600">
			</AppNavbar>

			<view class="Setting-tip f-size-12 px-2 mt-3 color-grey u-flex-content-start u-flex-items-center">
				The APP is not open
			</view>
			<mySettings :list="abilitys" class="mt-1" switchShow></mySettings>
			<view class="Setting-tip f-size-12 px-2 mt-3 color-grey u-flex-content-start u-flex-items-center">
				When then APP opens
			</view>
			<mySettings :list="abilitys2" class="mt-1" :buttonShow="buttonShow" switchShow></mySettings>
		</view>

	</view>
</template>

<script setup>
	// import mySettings from '/components/my-settings.vue';
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onHide,
		onLoad
	} from '@dcloudio/uni-app'


	const show = ref(false)
	const buttonShow = ref(false)
	let abilitys = reactive([{
			label: "System message notification",
			text: true
		},
		{
			label: "Notification Displays message details",

		}

	])
	const abilitys2 = reactive([{
			label: "In-app message banner",

		},
		{
			label: "Notification tone",

		},
		{
			label: "Vibration",
		},
	])

	onLoad(() => {
		// abilitys = uni.getStorageSync('seting')
		// console.log(abilitys);
	})

	onUnload(() => {
		uni.setStorageSync('seting', abilitys)
	})

	function goto(url) {
		uni.$to(url)
	}

	function rightClickFun() {
		console.log('hah');
		buttonShow.value = !buttonShow.value
	}
</script>

<style lang="scss" scoped>
	.app {
		.Setting {

			// border: 1px solid red;
			background-color: #ededed;


			.Setting-abilitys {
				// border: 1px solid red;
				background-color: #fff;

				.Setting-ability-item {
					flex-wrap: wrap;

					.Setting-ability-item-left {
						image {
							width: 45rpx;
							height: 45rpx;
						}
					}

					.Setting-ability-item-detail {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>